<template>
  <div class="mCom" style="background-color: #fff">
<!--  <div class="mCom">-->

    <div>
<!--            <el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">-->
<!--  <el-radio-button :label="false">展开</el-radio-button>-->
<!--  <el-radio-button :label="true">收起</el-radio-button>-->
<!--</el-radio-group>-->
      <span style="width: calc(100% - 2px);height:40px;line-height:40px;font-size:16px;cursor:pointer;text-align: center;display: inline-block;" @click="isCollapse = !isCollapse">
        <span v-if="!isCollapse">基础配置</span>
        <span class="el-icon-d-arrow-right"  v-if="isCollapse" style="display: inline-block" ></span>
        <span class="el-icon-d-arrow-left"  v-if="!isCollapse" style="display: inline-block" @click="isCollapse = !isCollapse"></span>
      </span>
      <span v-if="isCollapse" style="font-size: 30px;height: 200px">

      </span>

      <el-row class="tac"  :class=" [isCollapse?'leftMenuOff':'leftMenuOpen']">
        <el-col :span="24">
          <el-menu
            :default-active="activeIndex"
            class="el-menu-vertical-demo"
            :collapse="isCollapse"
            @select="handleSelect">
<!--            @open="handleOpen"-->
<!--            @close="handleClose"-->


<!--            <el-submenu index="1">-->
<!--              <template slot="title">-->
<!--                <i class="el-icon-location"></i>-->
<!--                <span>导航一</span>-->
<!--              </template>-->
<!--              <el-menu-item-group>-->
<!--                <template slot="title">分组一</template>-->
<!--                <el-menu-item index="1-1">选项1</el-menu-item>-->
<!--                <el-menu-item index="1-2">选项2</el-menu-item>-->
<!--              </el-menu-item-group>-->
<!--              <el-menu-item-group title="分组2">-->
<!--                <el-menu-item index="1-3">选项3</el-menu-item>-->
<!--              </el-menu-item-group>-->
<!--              <el-submenu index="1-4">-->
<!--                <template slot="title">选项4</template>-->
<!--                <el-menu-item index="1-4-1">选项1</el-menu-item>-->
<!--              </el-submenu>-->
<!--            </el-submenu>-->
            <el-menu-item index="1">
              <i class="el-icon-user-solid"></i>
              <span slot="title">用户管理</span>
            </el-menu-item>

            <el-menu-item index="2">
              <i class="el-icon-s-check"></i>
              <span slot="title">角色管理</span>
            </el-menu-item>
            <el-menu-item index="3">
              <i class="el-icon-s-grid"></i>
              <span slot="title">部门管理</span>
            </el-menu-item>

<!--            <el-submenu index="4">-->
<!--              <template slot="title">-->
<!--                <i class="el-icon-notebook-2"></i>-->
<!--                <span>日志管理</span>-->
<!--              </template>-->
<!--              <el-menu-item-group style="width: 150px">-->
<!--                <el-menu-item index="4-1" style="width: 150px">操作日志</el-menu-item>-->
<!--                <el-menu-item index="4-2" style="width: 150px">登录日志</el-menu-item>-->
<!--              </el-menu-item-group>-->
<!--            </el-submenu>-->
          </el-menu>

        </el-col>
      </el-row>
    </div>
    <div class="rightMenu">

      <div v-if=" chooseComp === 'user' ">
        <userComp/>
      </div>
      <div v-if=" chooseComp === 'role' ">
        <roleComp/>
      </div>
      <div v-if=" chooseComp === 'dept' ">
        <deptComp/>
      </div>
      <div v-if=" chooseComp === 'oplog' ">
        <oplogComp/>
      </div>
      <div v-if=" chooseComp === 'loginLog' ">
        <loginLogComp/>
      </div>
    </div>



  </div>
</template>

<script>
import userComp from "./user/index";
import roleComp from "./role/index";
import deptComp from "./dept/index";
import oplogComp from "./log/oplog";
import loginLogComp from "./log/loginLog";

// import { listUser } from "@/api/baseSetting";
export default {
  name: "baseSetting",

  data() {
    return {
      isCollapse: false,
      activeIndex: "1",
      chooseComp: "user"
    };
  },
  components: {
    userComp,
    roleComp,
    deptComp,
    oplogComp,
    loginLogComp
  },

  methods: {
    handleSelect(key, keyPath) {
      // console.log(key, keyPath);
      if (key.toString() === "1") {
        this.activeIndex = "1";
        this.chooseComp = "user";
      } else if (key.toString() === "2") {
        this.activeIndex = "2";
        this.chooseComp = "role";
      } else if (key.toString() === "3") {
        this.activeIndex = "3";
        this.chooseComp = "dept";
      } else if (key.toString() === "4-1") {
        this.activeIndex = "4-1";
        this.chooseComp = "oplog";
      } else if (key.toString() === "4-2") {
        this.activeIndex = "4-1";
        this.chooseComp = "loginLog";
      }
    }

    // handleOpen(key, keyPath) {
    //   console.log(key, keyPath);
    // },
    //
    // handleClose(key, keyPath) {
    //   console.log(key, keyPath);
    // }
  },

  mounted() {
    // listUser().then(res=>{
    //   console.log(res);
    // })
  }
};
</script>

<style scoped>
.mCom {
  display: flex;
  flex: 1;
}

.leftMenuOpen {
  width: 150px;
  /*background-color: firebrick;*/
  /*border-right: 10px solid #eff3f5;*/
  border-right: 2px solid #eff3f5;
  transition: all 0.2s linear 0s;
}
.leftMenuOff {
  width: 60px;
  /*background-color: firebrick;*/
  border-right: 10px solid #eff3f5;
  transition: all 0.2s linear 0s;
}
.rightMenu {
  width: calc(100% - 160px);
  /*margin-left: 10px;*/
  height: 100%;
  /*background-color: rgba(0,0,0,0.1);*/
  background-color: #fff;
}

.el-menu {
  border-right: none;
}
.el-submenu .el-menu-item {
  min-width: 150px !important;
}
.el-menu-item-group ul,
.el-menu el-menu--inline {
  overflow: hidden !important;
}

.app-container {
  padding: 10px;
}
.pagination-container {
  text-align: right !important;
}
/deep/ .el-submenu__icon-arrow {
  margin-top: -4px !important;
}
</style>
